import { Row, Col } from 'antd';
import { InbizIcon } from '@inbiz/utils';
import BizHeader from '@inbiz/basic/BizHeader';
import BizBody from '@inbiz/basic/BizBody';
import { TextWidget } from '@inbiz/react';
import { handleClick } from '../../utils';
import { useGetProcessNumber } from '../../useHooks/getProcessNumber';
import './index.less';

export default (props: { customfontsize: any; dynamicdata: any; userInfo: any; page: any; isChange: any; processGroup: any; rangeConfig: any; getProcessCenterNumber: any }) => {
  const { customfontsize, dynamicdata, userInfo, page, isChange, processGroup, rangeConfig, getProcessCenterNumber } = props;
  const mydynamicdata = useGetProcessNumber(dynamicdata, userInfo, isChange, rangeConfig, processGroup, getProcessCenterNumber);

  const colStyle = {
    fontSize: customfontsize,
    border: 'none',
  };

  const pageRoute = page ? page.split(',')[0] : '';
  return (
    <>
      <BizHeader {...props} />
      <BizBody {...props}>
        <div className="inbiz-processIndexPureType">
          <Row>
            {mydynamicdata.map((item, index) => {
              return (
                <Col
                  key={item.id}
                  span={item.gridNum * 2}
                  style={{
                    height: item.gridHeight,
                    ...colStyle,
                  }}
                  onClick={() => handleClick(item, pageRoute)}
                >
                  <div
                    style={{
                      height: '100%',
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'center',
                    }}
                  >
                    <div style={{ paddingRight: 10 }}>
                      <InbizIcon
                        type={item.icon.type}
                        style={{ fontSize: item.icon.size, color: item.icon.color }}
                      />
                    </div>
                    <div
                      style={{
                        paddingLeft: 10,
                        display: 'flex',
                        flexDirection: 'column',
                        overflow: 'hidden',
                        textOverflow: 'ellipsis',
                        whiteSpace: 'nowrap',
                        textAlign: 'center',
                      }}
                    >
                      <div
                        style={{ color: item.hintNumberColor, fontSize: item.hintNumberFontSize }}
                      >
                        {item.count}
                      </div>
                      <div style={{ color: item.titleColor }}>
                        <TextWidget>{item.title}</TextWidget>
                      </div>
                    </div>
                  </div>
                </Col>
              );
            })}
          </Row>
        </div>
      </BizBody>
    </>
  );
};
